                <%@ include file="../common/top.jsp"%>
                <div id="Welcome">
                    <div id="WelcomeContent">
                        <!--显示登录username-->
                    </div>
                </div>

<%--                <div class="tag">--%>
<%--                    <a>Birds</a>--%>
<%--                    <a>Cats</a>--%>
<%--                    <a>Dogs</a>--%>
<%--                    <a>Fish</a>--%>
<%--                    <a>Reptiles</a>--%>
<%--                </div>--%>

                <div class="main-box">
                    <div class="left">
                        <div class="tit">SUBMARKET</div>
                        <ul class="main-nav">
                            <li>
                                <img src="images/bird1.gif "class="icon">
                                <a href="categoryForm?categoryId=BIRDS">parrot / dove / sparrow</a>
                            </li>
                            <li>
                                <img src="images/dog1.gif "class="icon">  <a href="categoryForm?categoryId=DOGS">Husky / Corgi /Tugou</a>
                            </li>
                            <li>
                                <img src="images/fish1.gif "class="icon"> <a href="categoryForm?categoryId=FISH">Fish / GoldFish /</a>
                            </li>
                            <li>
                                <img src="images/cat1.gif "class="icon"> <a href="categoryForm?categoryId=CATS">cat / cat / cat</a>
                            </li>
                            <li>
                                <img src="images/dog1.gif "class="icon">  <a href="categoryForm?categoryId=REPTILES">crocodile / snake /</a>
                            </li>
                            <li>
                                <img src="images/cat2.gif "class="icon"><a href="categoryForm?categoryId=REPTILES">Whitemouse / mouse /</a>
                            </li>
                            <li>
                                <img src="images/dog3.gif "class="icon"><a href="categoryForm?categoryId=REPTILES">octopus / crab / shrimp</a>
                            </li>
                            <li>
                                <img src="images/cat2.gif "class="icon"><a href="categoryForm?categoryId=REPTILES">Whitemouse / mouse /</a>
                            </li>
                            </li>
                            <li>
                                <img src="images/fish1.gif "class="icon"><a href="categoryForm?categoryId=FISH">Fish / GoldFish /</a>
                            </li>
                            <li>
                                <img src="images/dog1.gif "class="icon"><a href="categoryForm?categoryId=DOGS">Husky / Corgi /Tugou</a>
                            </li>

                            <li>
                                <img src="images/dog3.gif "class="icon">octopus / crab / shrimp
                            </li>
                            <li>
                                <img src="images/cat2.gif "class="icon">Whitemouse / mouse /
                            </li>
                            <li>
                                <img src="images/3.jpg "class="icon">more / moreand
                            </li>

                        </ul>
                    </div>
                    <div class="mid">
                        <a href="#">
                            <img  src="images/10007.jpg" class="ban"id="img">
                        </a>
                        <a href="javascript:;"class="prev"></a>
                        <a href="javascript:;"class="next"></a>
                        <!-- <ul class="banner-btn">
                         <li class="btn-active"></li>
                         <li></li>
                         <li></li>
                         <li></li>
                         <li></li>
                         <li></li>
                         <li></li>
                        </ul> -->
                        <script>
                            let img=document.getElementById('img');
                            let prev=document.querySelector('.prev');
                            let next=document.querySelector('.next');
                            let lis=document.querySelectorAll('.banner-btn>li');
                            let slideBanner=document.querySelector('mid');
                            let imgArr=['10001.jpg','10002.jpg','10003.jpg','10004.jpg','10005.jpg','10006.jpg','10007.jpg','10008.jpg','10009.jpg']
                            let i=0;
                            function banner()
                            {
                                img.src='images/'+imgArr[i];

                            }
                            function autoBanner()
                            {
                                i++;
                                if(i>imgArr.length-1)
                                {
                                    i=0;
                                }
                                banner();
                            }
                            let timer= setInterval(autoBanner,3000);
                            slideBanner.onmouseover=function(){
                                clearInterval(timer);
                            }
                            slideBanner.onmouseout=function(){
                                timer=setInterval(autoBanner,3000);
                            }
                        </script>
                        <div class="ad-box">
                            <img src="images/c.jpg"class="c">
                            <img src="images/d.jpg"class="d">
                        </div>
                    </div>
                    <div class="right">
                        <p class="tit">ANNOUNCEMENT</p>
                        <img src="images/2.webp"class="p">
                        <img src="images/j.webp"class="p">
                        <img src="images/p.png"class="p">
                        <ul class="news">
                            <li>What's new in the announcement is here~</li>
                            <li>
                                <span>Ano</span>
                                <a href="http://www.csu.edu.cn">Pet stores and animal protection agencies</a>
                            </li>
                            <li>
                                <span>May</span>
                                <a href="http://www.csu.edu.cn">The pet store introduces a new breed of pet: Totoro</a>
                            </li>
                            <li>
                                <span>Hot</span>
                                <a href="http://www.csu.edu.cn">The pet store has a new product!! Come and watch</a>
                            </li>
                            <li>
                                <span>Ano</span>
                                <a href="http://www.csu.edu.cn"> Pet stores join the Animal Welfare League</a>
                            </li>
                            <li>
                                <span>Ano</span>
                                <a href="http://www.csu.edu.cn">The pet store will give away 6 white swans  for free</a>
                            </li>
                            <li>
                                <span>Hot</span>
                                <a href="http://www.csu.edu.cn">The pet shop "Meow Meow Pet House" is launched</a>
                            </li>
                            <li>
                                <span>Ano</span>
                                <a href="http://www.csu.edu.cn">Pet stores join the Animal Welfare League</a>
                            </li>
                            <li>
                                <span>Wat</span>
                                <a href="http://www.csu.edu.cn">The pet shop "Meow Meow Pet House" is launched</a>
                            </li>
                            <li>
                                <span>Hot</span>
                                <a href="http://www.csu.edu.cn">The pet store introduces a new breed of pet: Totoro</a>
                            </li>
                            <li>
                                <span>Ano</span>
                                <a href="http://www.csu.edu.cn"> Pet stores join the Animal Welfare League</a>
                            </li>
                            <li>
                                <span>Hot</span>
                                <a href="http://www.csu.edu.cn">The pet shop "Meow Meow Pet House" is launched</a>
                            </li>
<%--                            <li>--%>
<%--                                <span>新品</span>--%>
<%--                                2023.11.26 宠物商店“喵喵宠物屋”上线--%>
<%--                            </li>--%>
<%--                            <li>--%>
<%--                                <span>新品</span>--%>
<%--                                2023.11.26 宠物商店出新品啦！！快来围观--%>
<%--                            </li>--%>
<%--                            <li>--%>
<%--                                <span>公告</span>--%>
<%--                                2023.11.26 宠物商店与动物保护机构联合开展领养活动--%>
<%--                            </li>--%>
                        </ul>
                    </div>
                    <div class="home">
                        <p >     ......    </p>
                        <div class="wrap">
                            <div id="detailss"></div>
                            <p class="p1"> -------========*LIMITED-TIMER FLASH DEALS*========-------- </p>
                            <div class="miaosha">

                                <div class="goods-box">
                                    <a href="productForm?productId=AV-CB-01"> <img src="images/b10001.jpg" id="EST-18" ></a>

                                    <p>$193.5</p>


                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=K9-BD-01">
                                    <img src="images/d10001.jpg"  id="EST-6" >
                                    <p>$18.5</p>

                                    </a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=FL-DLH-02">
                                    <img src="images/c10001.jpg" id="EST-16">
                                    <p>$93.5</p>

                                    </a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=FI-FW-01">
                                    <img src="images/f10001.jpg" id="EST-4">
                                    <p>$18.5</p>

                                    </a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=AV-SB-02">
                                    <img src="images/b10002.jpg" id="EST-19">
                                    <p>$15.5</p>

                                    </a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=RP-LI-02">
                                    <img src="images/10002.jpg"id="EST-13">
                                    <p>$18.5</p>

                                    </a>
                                </div>
                            </div>
                            <p class="p1">--------========*FEATURED NEW*========--------</p>
                            <div class="tese">
                                <div class="goods-box">
                                    <a href="productForm?productId=K9-CW-01">
                                    <img src="images/d10002.jpg"id="EST-26">
                                    <p>$125.5~155.29</p>

                                    </a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=AV-SB-02">
                                    <img src="images/b10003.jpg"id="EST-1">
                                    <p>$15.5</p>

                                    </a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=AV-SB-02">
                                    <img src="images/b10004.jpg"id="EST-2">
                                    <p>$15.5</p>  </a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=FI-SW-01">
                                    <img src="images/f10002.jpg"id="EST-27">
                                    <p>$16.5</p>  </a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=K9-CW-01">
                                    <img src="images/d10003.jpg"id="EST-5">
                                    <p>$125.5~155.29</p>  </a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=AV-SB-02">
                                    <img src="images/10005.jpg"id="EST-28">
                                    <p>$15.5</p>  </a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=K9-RT-01">
                                    <img src="images/d10004.jpg"id="EST-7">
                                    <p>$20</p>  </a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=AV-CB-01">
                                    <img src="images/b10005.jpg"id="EST-8">
                                    <p>$155.29</p> </a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=AV-CB-01">
                                    <img src="images/b10004.jpg"id="EST-3">
                                    <p>$193.5</p>  </a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=FI-SW-02">
                                    <img src="images/f10003.jpg"id="EST-29">
                                    <p>$18.5</p>  </a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=K9-RT-01">
                                    <img src="images/d10006.jpg"id="EST-10">
                                    <p>$155.29</p>  </a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=K9-RT-01">
                                    <img src="images/10007.jpg"id="EST-11">
                                    <p>$155.29</p>  </a>
                                </div>
                            </div>
                            <p class="p1">--------========*My FAVORITE*========--------</p>
                            <div class="favorite">
                                <div class="goods-box">
                                    <a href="productForm?productId=K9-PO-02">
                                    <img src="images/d1.jpg" id="EST-12">
                                        <p>$18.5</p></a> </a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=AV-SB-02">
                                    <img src="images/b1.jpg"id="EST-14">
                                    <p>$15.5</p></a> </a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=K9-DL-01">
                                    <img src="images/d2.jpg"id="EST-15">
                                    <p>$18.5</p></a> </a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=FI-SW-02">
                                    <img src="images/f10002.jpg"id="EST-21">
                                    <p>$18.5</p></a> </a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=K9-DL-01">
                                    <img src="images/d3.jpg"id="EST-22">
                                    <p>$18.5</p></a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=FI-SW-01">
                                    <img src="images/b2.jpg"id="EST-25">
                                    <p>$16.5</p></a>
                                </div>
                            </div>
                            <p class="p1">--------========*RECOMMEND FOR YOU*========--------</p>
                            <div class="tuijian">
                                <div class="goods-box">
                                    <a href="productForm?productId=K9-PO-02">
                                    <img src="images/d4.jpg"id="EST-17">
                                    <p>$18.5</p></a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=AV-SB-02">
                                    <img src="images/b4.jpg"id="EST-23">
                                    <p>$15.5</p></a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=FL-DLH-02">
                                    <img src="images/c2.jpg"id="EST-24">
                                    <p>$93.5</p></a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=K9-DL-01">
                                    <img src="images/d5.jpg"id="EST-20">
                                    <p>$18.5</p></a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=FL-DLH-02">
                                    <img src="images/c4.jpg">
                                    <p>$93.5</p></a>
                                </div>
                                <div class="goods-box">
                                    <a href="productForm?productId=FI-SW-01">
                                    <img src="images/f10002.jpg">
                                    <p>$16.5</p></a>
                                </div>
                            </div>
                            <img src="images/111.png"style="max-width: 100%; max-height: 100%; width: 100%; height: auto;">
                        </div>
                    </div>
                </div>
                <script>
                    var details = '';
                    // 使用jQuery选择器选择所有的图片元素，并为它们绑定mouseenter事件处理函数
                    $('img').on('mouseenter', function() {
                        // 在鼠标移上去时执行的操作
                        // 例如：改变图片的样式、显示提示信息等
                        var itemId = this.id;
                        var mouseX = event.clientX;
                        var mouseY = event.clientY;

                        if(itemId!=null||itemId!=""){
                            $.ajax({
                                url:'DetailsServlet',
                                type:'get',
                                data:{
                                    itemId:itemId
                                },
                                success:function (response) {
                                    details = response;
                                    showPopup(details,mouseX,mouseY);
                                }
                            })
                        }



                    });

                    $('img').on('mouseleave', function() {
                        clearPopup();
                    });


                    function showPopup(content, x, y) {
                        var popup = $('<div class="popup">' + content + '</div>');
                        popup.css({
                            'position': 'fixed',
                            'top': y + 'px',  // 设置悬浮窗的垂直位置为鼠标的垂直位置
                            'left': x + 'px' , // 设置悬浮窗的水平位置为鼠标的水平位置

                        });
                        popup.css('font-size', '16px');

// 设置背景颜色
                        popup.css('background-color', '#f2f2f2');
                        $('#Content').append(popup);
                    }

                    function clearPopup() {
                        details = '';
                        $('.popup').remove();  // 使用 jQuery 清除所有悬浮窗
                    }

                </script>
                <%@ include file="../common/bottom.jsp"%>``